<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>勋章展示</title>
</head>

<body>

    <main>
        <div class="tips-badge">
            <span></span>
            <span>今日排名</span>
            <div>
                <div>
                    <p>我的勋章</p>
                    <p>MY BADGES</p>
                </div>
                <span>9</span>
            </div>

        </div>

        <ul id="shwoBadge">
            <li>
                <img src="../img/dog.jpg" alt="">
            </li>

            <li>
                <img src="../img/cat.jpg" alt="">
            </li>

            <li>
                <img src="../img/头像.jpg" alt="">
            </li>

            <li>
                <img src="../img/头像.jpg" alt="">
            </li>

            <li>
                <img src="../img/头像.jpg" alt="">
            </li>

            <li>
                <img src="../img/头像.jpg" alt="">
            </li>   
        </ul>

        <div class="show-mask opacity" id="showMask">
            <img src="../img/头像.jpg" id="showImg">
        </div>

    </main>


</body>

</html>